<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="shortcut icon"  th:href="@{/static/L-img/L-image/L-logo.png}">
    <link th:href="@{/static/L-css/L-personCenter.css}" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="all">
        <!-- 头部 -->
        <div class="header">
            <div class="kMusic">
                <img th:src="@{/static/L-img/L-image/future1.jpg}"/>
            </div>
            <ul class="manya">
                <li><a th:href="@{/}">发现音乐</a></li>
                <li><a  class="vipBtn">VIP会员</a></li>
                <li><a class="myMusic">我的音乐</a></li>
                <li class="moreHerd" onmouseover="showMore()" onmouseout="offMore()">
                    更多
                    <img  id="img1" th:src="@{/static/L-img/L-image/L-down.png}"/>
                    <div class="hideMore" onmouseover="showMore()" onmouseout="offMore()">
                        <ul class="hideMusic">
                            <li><a th:href="@{/music/queryAllSinger}">歌手</a></li>
                            <li><a th:href="@{/music/allMusic}">歌单</a></li>
                            <li><a th:href="@{/toMvpaper}">MV</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!-- 搜索和登录注册 -->
            <div class="right">
                <div class="headCenter">
                    <div class="headCenterSearch">
                        <form th:action="@{/music/queryByNameMusic}" method="get" class="seekForm" id="seekGoodsForm">
                            <input id="goSearch" autocomplete="off" type="text" name="queryMusicName" placeholder="搜索歌手/歌单/MV/歌词" />
                            <input type="submit" id="actSearch" value="搜索"/>
                        </form>
                    </div>
                </div>
                <div class="persons" >
                    <span>欢迎</span>
                    <block th:if="${session.USer}!=null">
                        <span class="userName" th:text="${session.USer.userName}">用户名</span>
                    </block>
                    <block th:if="${session.User}!=null">
                        <span class="userName" th:text="${session.User.userName}">用户名</span>
                    </block>
                    <block th:if="${session.user}!=null">
                        <span class="userName" th:text="${session.user.userName}">用户名</span>
                    </block>
                    <span class="out">退出登录</span>
                </div>
            </div>
        </div>
        <!--    退出登录的代码-->
        <div class="hideLogOut">
            <div class="hideLogOutContent">
                <h2 class="chooseLogOut">是否退出登录</h2>
                <div class="logOutBtn">
                    <button class="logOutNoBtn">取 消</button>
                    <button class="logOutYesBtn">确 认</button>
                </div>
            </div>
        </div>
<!--        背景图片-->
        <div class="background">
            <div class="shadow">
                <div class="welcome">
                    <div class="name">
                        <img th:src="@{/static/L-img/L-image/L-user.webp}"/>
                        <div class="greet" th:text="${session.USER.userName}">欢迎</div>
                    </div>
                </div>
            </div>

        </div>
<!--        下载的歌曲，收藏的歌曲，以及个人中心-->
        <div class="main">
            <div class="main-content">
               <ul class="main-header">
                   <li class="navItem active">
                       <div class="orders" target="_self">
                           <i class="iconfont icon-yinzhi"></i>
                           <span class="navFont">我喜欢</span>
                       </div>
                   </li>
                   <li class="navItem">
                       <div class="newSing"  target="_self">
                           <i class="iconfont icon-yinzhi"></i>
                           <span class="singNew">我的歌单</span>
                       </div>
                   </li>
                   <li class="navItems">
                       <a class="users" href="javascript:;" target="_self">
                           <i class="iconfont icon-yinzhi"></i>
                           <button class="delLoad">我的下载</button>
                       </a>
                   </li>
                   <li class="navItems">
                       <a class="setUp" href="javascript:;" target="_self">
                           <i class="iconfont icon-yinzhi"></i>
                           <button class="navFontBtn">个人中心</button>
                       </a>
                   </li>
               </ul>
<!--                我喜欢(收藏)的歌曲列表-->
                <div class="showSongs active">
                    <table class="inquireThead" cellspaccing="0">
                        <thead class="inquireThead">
                            <tr class="inquireTheadTr">
                                <th>操作</th>
                                <th>序号</th>
                                <th>歌曲</th>
                                <th>专辑</th>
                                <th>时长</th>
                            </tr>
                        </thead>
                        <tbody class="inquireTbody">
                            <tr th:each="love,loopStatus:${Love}" class="hhh">
                                <td>
                                    <img class="delHide" th:src="@{/static/L-img/L-image/delet.png}"/>
                                </td>
                                <td class="xuhao" th:text="${loopStatus.count}">2</td>
                                <td><a class="www"  th:href="@{/music/queryByIdAlbmusic(mcId=${love.mcId})}"></a></td>
<!--                                <td><a class="www" th:text="${love.mcName}" th:href="@{/music/queryByIdAlbmusic(mcId=${love.mcId})}"></a></td>-->
                                <td th:text="${love.albName}">3</td>
                                <td th:text="${love.mcTime}">5</td>

                            </tr>

                        </tbody>
                    </table>
                </div>
<!--                我喜欢(收藏)的歌曲列表 end-->
<!--                我的歌单的列表-->
                <div class="showSongs">
                    <table class="inquireThead" cellspaccing="0">
                        <thead class="inquireThead">
                            <tr class="inquireTheadTr">
                               <th>图片</th>
                                <th>歌曲名</th>
                            </tr>
                        </thead>
                        <tbody class="inquireTbody">
                            <tr th:each="load,loopStatus:${list}">
                                <td>
                                    <img class="imgList" th:src="@{/static/L-img/L-image/singList.jpg}"/>
                                </td>
                                <td th:text="${load.mclsName}">歌单的名字</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
<!--                我的歌单的列表 end-->

            </div>



        </div>
        <!-- 下边的小黑窗 -->
        <div class="black">
            <ul class="logo">
                <li><a href="javascript:;">用户服务协议</a></li>
                <li>隐私政策</li>
                <li>权利声明</li>
                <li>联系我们</li>
                <li>广告服务</li>
            </ul>
        </div>
        <div class="foot">
            <p>抛开忙碌，远离喧嚣，进入这里，你会发现生活是多么的缤纷多彩 欢迎加入我们</p>
            <p>Copyright © 2001 - 2021 Tencent. All Rights Reserved.</p>
            <p>未来公司 版权所有 QQ:911662779</p>
        </div>
    </div>
    <!-- 个人信息的弹出框-->
    <div class="hideperson">
        <div class="personCenter">
            <h3>修改个人信息</h3>
            <button class="closeChange"><span>x</span></button>
            <div class="personForm">
                <table>
                    <tbody>
                        <tr class="tableList">
                            <td class="firstTd">用户名</td>
                            <td class="secondTd">
                                <input class="alter" th:value="${session.USER.userName}"/>
                            </td>
                        </tr>
                        <tr class="tableList">
                            <td class="firstTd">用户账号</td>
                            <td class="secondTd">
                                <input type="text" th:value="${session.USER.userHao}" disabled="disabled" class="alter"/>
                            </td>
                        </tr>

                        <tr class="tableList">
                            <td class="firstTd">用户生日</td>
                            <td class="secondTd">
                                <input type="date" class="alter" th:value="${session.USER.userBirth}"/>
                            </td>
                        </tr>
                        <tr class="tableList">
                            <td class="firstTd">用户地址</td>
                            <td class="secondTd">
                                <input type="text" class="alter" th:value="${session.USER.userId}"/>
                            </td>
                        </tr>
                        <tr class="tableList">
                            <td class="firstTd">邮箱</td>
                            <td class="secondTd">
                                <input type="text" class="alter" th:value="${session.USER.userEmail}"/>
                            </td>
                        </tr>
                        <tr class="tableList">
                            <td class="firstTd">性别</td>
                            <td class="secondTd">
                                <select th:value="${session.USER.userGen}" class="alter">
                                    <option>男</option>
                                    <option>女</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="personButton">
                    <button class="changeNoBtn">取消</button>
                    <button class="changeBtn">修改</button>
                    <button class="changeYesBtn">确认</button>
                </div>
            </div>
        </div>
    </div>
<!--个人信息弹出框 end-->
<!--    当点击我喜欢删除的时候出现一个是否取消收藏的弹框-->
    <div class="hideCollect">
        <div class="hideCollectForm">
            <div class="hideCollectFormTop">
                <h5>未来音乐</h5>
                <button class="closeCollect"><span>x</span></button>
            </div>
            <div class="popub">
               <div class="popub-inner">
                   <div class="popub-img">
                       <img th:src="@{/static/L-img/L-image/point.png}"/>
                   </div>
                   <p class="popub-desc">确定要取消收藏此歌曲?</p>
               </div>
            </div>
            <div class="hideFormBottom">
                <button class="collectYesBtn">确 认</button>
                <button class="collectNoBtn">取 消</button>

            </div>
        </div>
    </div>
<!--我的下载的弹窗-->
    <div class="hideLoad">
        <div class="hideLoadForm">
            <div class="hideLoadFormTop">
                <h5>未来音乐提示你</h5>
                <button class="closeLoad"><span>x</span></button>
            </div>
            <div class="popub">
                <div class="popub-inner">
                    <div class="popub-img">
                        <img th:src="@{/static/L-img/L-image/point.png}"/>
                    </div>
                    <p class="popub-desc">你下载的歌曲在你的文件夹里面等你呀!</p>
                </div>
            </div>
            <div class="hideFormBottom">
                <button class="loadYesBtn">确 认</button>
                <button class="loadNoBtn">取 消</button>

            </div>
        </div>
    </div>
<!--我的下载的弹窗 end-->

<!--创建新歌单-->
    <div class="hideList">
        <div class="hideSingerList">
            <div class="hideListTop">
                <h5>创建新歌单</h5>
                <button class="closeList"><span>x</span></button>
            </div>
            <div class="popub">
                歌单名:<input type="text">
            </div>
            <div class="hideFormBottom">
                <button class="loadYesBtn">确 认</button>
                <button class="loadNoBtn">取 消</button>
            </div>
        </div>
    </div>
<!--创建新歌单 end-->
</body>
<script th:inline="javaScript">
    var User=[[${session.USER}]]
    console.log(User)
    console.log('1')
</script>
<script th:src="@{/static/L-js/jquery-1.12.4.min.js}" rel="script" type="text/javascript"></script>
<script th:src="@{/static/L-js/L-personCenter.js}" rel="script" type="text/javascript">
</script>


</html>